<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>近期投递</title>
    <link rel="stylesheet" href="./css/base.css" />
    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <style>
        .nav-tabs {
            border-bottom: 1px solid #ddd;
            border-top: 0.5px #ddd solid;
            display: flex;
            justify-content: space-between;
        }

        .nav-tabs .active a {
            border: none !important;
            border-bottom: solid 3px #3498db !important;
        }

        .item-tite {
            font-size: 1.5rem;
            text-align: center;
            height: 1.5rem;
            position: relative;
            top: 1rem;
            margin-bottom: 2rem;
        }

        .item-table {
            position: fixed;
            padding-top: 1rem;
            width: 93%;
            background: #fff;
            z-index: 600;
        }

        .finshed {
            text-align: center;
        }

        .item-container {
            width: 100%;
            height: 8rem;
            /* background: pink; */
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: row;
            padding: 0.5rem 1rem;
            border-bottom: 1px #ddd solid;
        }

        .item-container .left-has-img {
            width: 28%;
            height: 100%;
            /* background: forestgreen; */
            position: relative;
        }

        .item-container .item-content {
            width: 72%;
            height: 100%;
            /* background: gold; */
        }

        .item-content .content-person {
            padding: 1rem 1rem 0.5rem 1rem;
        }

        .item-content .content-edu {
            padding: 0.5rem 1rem 1rem 1rem;
        }

        .item-container .left-has-img img {
            position: absolute;
            width: 6.9rem;
            height: 6.9rem;
            border-radius: 50%;
            left: 2px;
            top: 1px;
        }

        .hidden {
            display: none;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="item-table">
            <ul id="myTab" class="nav nav-tabs">
                <li class="active"><a href="#table1" data-toggle="tab">未处理</a></li>
                <li><a href="#table2" data-toggle="tab">纳入考虑</a></li>
                <li><a href="#table3" data-toggle="tab">暂不考虑</a></li>
            </ul>

        </div>
        <div id="wrapper" style="margin-top: 5rem;">
            <div id="scroller">
                <ul class="item-list">
                    <li>
                    </li>
                </ul>
                <div class="pull-loading">
                </div>
            </div>
        </div>
        <div class="finshed hidden">暂无数据</div>

    </div>
</body>
<script src="./js/iscroll.js"></script>
<script>
    $("#1").click(function () {
        $(location).attr('href', 'http://www.baidu.com');
    });
    var arr = [
        {
            list: [
                {
                    id: '1',
                    url: 'image/t1.png',
                    name: '谭小庆',
                    sex: '男',
                    age: '18',
                    edu: '博士',
                    department: '家里蹲',
                }
            ]
        }, // tab的数据
        {
            list: [
                {
                    id: 'name1',
                    url: 'cont1',
                    name: '谭小庆',
                    sex: '男',
                    age: '18',
                    edu: '博士',
                    department: '家里蹲',
                }
            ]

        }, // tab2的数
        {
            list: [
                {
                    id: 'name1',
                    url: 'cont1',
                    name: '谭小庆',
                    sex: '男',
                    age: '18',
                    edu: '博士',
                    department: '家里蹲',
                }
            ]

        } // tab3的数据
    ]
    $(function () {
        $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
            //为tab按钮绑定事件
            //    alert("sdasd")
            var key = $(this).parent().index();
            
            
            var res = arr[key].list; // 后台返回的数据
            
            // 成功回调后执行的语句
            htmls(res);
            switch (key) {
                case 0:
                    // $.ajax({
                    //     type: "POST",
                    //     url: "",
                    //     data: key,
                    //     success: function (res) {
                    //         $('#table1').load('url');
                    //     }

                    // });
                    var res = arr[key].list; // 后台返回的数据
                    
                    // 成功回调后执行的语句
                    htmls(res);
                    break;
                case 1:
                    // $.ajax({
                    //     type: "POST",
                    //     url: "",
                    //     data: key,
                    //     success: function (res) {
                    //         $('#table2').load('url2');
                    //     }
                    // });
                    var res = arr[key].list; // 后台返回的数据
                    
                    // 成功回调后执行的语句
                    htmls(res);

                    break;
                case 2:
                    // $.ajax({
                    //     type: "POST",
                    //     url: "",
                    //     data: key,
                    //     success: function (res) {
                    //         $('#table3').load('url3');
                    //     }
                    // });
                    var res = arr[key].list; // 后台返回的数据
                    
                    // 成功回调后执行的语句
                    htmls(res);

                    break;
            }


        });
        $('ul.nav-tabs li.active a[data-toggle="tab"]').trigger("shown.bs.tab");//默认触发  
    });
    function htmls(res) {
        var html = ['<div id="scroller">',
            '<ul class="item-list">',
            '<li>'].join('');
        res.forEach(e => {
            html += [

                '<div id="' + e.id + '" class="item-container">',
                '<div class="left-has-img">',
                '<img src="' + e.url + '">',
                '</div>',
                '<div class="item-content">',
                '<p class="content-person">',
                '<span>' + e.name + '(' + e.sex + ')',
                '</span>',
                '<span>&nbsp;' + e.age + '岁</span>',
                '</p>',
                '<p class="content-edu">',
                '<span>' + e.edu + '</span>',
                '<span>&nbsp; ' + e.department + '</span></p></div></div>'
            ].join('');

        });
        html = html + [
            '</li>',
            ' </ul>',
            '<div class="pull-loading hidden ">',
            '上拉加载',
            '</div>',
            '</div>',
        ].join('')
        $('#scroller').html(html);
    }
    //上拉加载
    TODO:
    var myscroll = new iScroll("wrapper", {
        onScrollMove: function () { //拉动时
            //上拉加载
            if (this.y < this.maxScrollY) {
                $(".pull-loading").html("释放加载");
                $(".pull-loading").addClass("loading");
            } else {
                $(".pull-loading").html("上拉加载");
                $(".pull-loading").removeClass("loading");
            }
        },
        onScrollEnd: function () { //拉动结束时
            //上拉加载
            if ($(".pull-loading").hasClass('loading')) {
                $(".pull-loading").html("加载中...");
                pullOnLoad();
            }
        }
        //        onRefresh: function () {
        //            $('.pull-loading').html("上拉加载");
        //        }
    });
    //上拉加载函数,ajax
    var num = 0;//页数
    var page = 10; //每次加载10条
    function pullOnLoad() {
        setTimeout(function () {
            /*$.ajax({
                url: "json/data.json",
                type: "get",
                dataType: 'json',
                success: function (data) {
                    var data_length = data.length;//数据的总长度
                    var remainder = data_length % page;//余数
                    if ( data_length >= (num+page)){
                        for (var j = num; j < num + page; j++){
                            var text = data[j].text;
                            $("#scroller ul").append("<li>"+ text +"</li>");
                        }
                        num+=page;
                    }else if (remainder != 0 && data_length-num == remainder){
                        for (var j = num; j < num + remainder; j++){
                            var text = data[j].text;
                            $("#scroller ul").append("<li>"+ text +"</li>");
                        }
                        num+=page;
                    }else{
                        $('.pull-loading').html("无更多数据了");
                    }
                    myscroll.refresh();
                },
                error: function () {
                    
                }
            });*/
            var arr = [
                {
                    list: [
                        {
                            id: '1',
                            url: 'image/t1.png',
                            name: '谭小庆',
                            sex: '男',
                            age: '18',
                            edu: '博士',
                            department: '家里蹲',
                        },
                        {
                            id: 'name1',
                            url: 'cont1',
                            name: '谭小庆',
                            sex: '男',
                            age: '18',
                            edu: '博士',
                            department: '家里蹲',
                        },
                        {
                            id: 'name1',
                            url: 'cont1',
                            name: '谭小庆',
                            sex: '男',
                            age: '18',
                            edu: '博士',
                            department: '家里蹲',
                        },
                    ]
                }, // tab的数据
                {
                    list: [
                        {
                            id: 'name1',
                            url: 'cont1',
                            name: '谭小庆',
                            sex: '男',
                            age: '18',
                            edu: '博士',
                            department: '家里蹲',
                        },
                        {
                            id: 'name1',
                            url: 'cont1',
                            name: '谭小庆',
                            sex: '男',
                            age: '18',
                            edu: '博士',
                            department: '家里蹲',
                        },
                        {
                            id: 'name1',
                            url: 'cont1',
                            name: '谭小庆',
                            sex: '男',
                            age: '18',
                            edu: '博士',
                            department: '家里蹲',
                        },
                    ]

                }, // tab2的数
                {
                    list: [
                        {
                            id: 'name1',
                            url: 'cont1',
                            name: '谭小庆',
                            sex: '男',
                            age: '18',
                            edu: '博士',
                            department: '家里蹲',
                        },
                        {
                            id: 'name1',
                            url: 'cont1',
                            name: '谭小庆',
                            sex: '男',
                            age: '18',
                            edu: '博士',
                            department: '家里蹲',
                        },
                        {
                            id: 'name1',
                            url: 'cont1',
                            name: '谭小庆',
                            sex: '男',
                            age: '18',
                            edu: '博士',
                            department: '家里蹲',
                        },
                    ]

                } // tab3的数据
            ]
            var res = arr[0].list;
            var html = '';
            res.forEach(e => {
                html += [

                    '<div id="' + e.id + '" class="item-container">',
                    '<div class="left-has-img">',
                    '<img src="' + e.url + '">',
                    '</div>',
                    '<div class="item-content">',
                    '<p class="content-person">',
                    '<span>' + e.name + '(' + e.sex + ')',
                    '</span>',
                    '<span>&nbsp;' + e.age + '岁</span>',
                    '</p>',
                    '<p class="content-edu">',
                    '<span>' + e.edu + '</span>',
                    '<span>&nbsp; ' + e.department + '</span></p></div></div>'
                ].join('');
            });
            for (var j = 0; j < 4; j++) {
                $("#scroller .item-list").append(html);
            }
            myscroll.refresh();

        }, 1000);
    }

</script>

</html>